<template>
<div>
  <Row type="flex" justify="space-between" style="width: 90%;margin-left: 5%">
    <Col>
      <Button type="info" style="background:rgba(58,152,255,1);width: 80px" @click="endsession">结束会话</Button>
    </Col>
    <Col>
      <Button type="info" style="background:rgba(58,152,255,1);width: 80px" @click="snapshot">截图</Button>
    </Col>
    <Col>
      <Button type="info" style="background:rgba(58,152,255,1);width: 80px" @click="screen" v-show="screenstreampublication==null">屏幕共享</Button>
      <Button type="error" style="width: 80px"  v-show="screenstreampublication" @click="stopscreen(screenstreampublication)">停止共享</Button>
    </Col>

    <Col v-show="screenstreampublication">
      <Button type="info" style="background:rgba(58,152,255,1);width: 80px;" v-show="screenstreampublication" @click="screenmark()">共享标注</Button>
    </Col>

    <!--<Col>-->
      <!--<Button type="info" style="background:rgba(58,152,255,1);width: 80px" @click="screenApp" v-show="screenappstreampublication==null">投应用</Button>-->
      <!--<Button type="error" style="width: 80px"  v-show="screenappstreampublication" @click="stopscreen(screenappstreampublication)">停止应用</Button>-->
    <!--</Col>-->
    <Col>
      <Button type="info" style="background:rgba(58,152,255,1);width: 80px" @click="transfer">转接</Button>
    </Col>
    <Col>
      <Button type="info" style="background:rgba(58,152,255,1);width: 80px" @click="three">三方</Button>
    </Col>
      <Col>
       <Button type="info" style="background:rgba(58,152,255,1);width: 80px" v-show="!isConsulting" @click="consulting">咨询</Button>
      </Col>
      <Col>
       <Button type="info" style="width: 80px" v-show="isConsulting" @click="stopConsulting">停止咨询</Button>
      </Col>
      <Col>
      <Button type="info" style="background:rgba(58,152,255,1);width: 80px" @click="remove">强踢</Button>
    </Col>
  </Row>

  <div class="content">

    <Row type="flex" justify="space-between" style="width: 100%;" class="aiop">
      <!-- <div class="col" @click="photoGuideBox()">
        <img src="../../static/images/camera.png" class="img">
        <div class="title">推送引导框</div>
      </div> -->

      <!--<div class="col" @click="snapshot()">-->
        <!--<img src="../../static/images/camera.png" class="img">-->
        <!--<div class="title">拍摄</div>-->
      <!--</div>-->

      <!-- <div class="col" @click="sendform()">
        <img src="../../static/images/form.png" class="img">
        <div class="title">推送表单</div>
      </div> -->
      <div class="col" onclick="document.getElementById('agentfile').click()">
        <img src="../../static/images/file.png" class="img">
        <div class="title">推送PDF</div>
        <input style="display: none;" type="file" name="file2" id="agentfile" value="" accept=".pdf" @change="sendagentfile($event)">
      </div>
      <div class="col" @click="handsign()">
        <img src="../../static/images/hand.png" class="img">
        <div class="title">推送签名框</div>
      </div>
      <div class="col" @click="sendvideo()">
        <img src="../../static/images/sendvideo.png" class="img">
        <div class="title">推送视频</div>
      </div>

      <div class="col" @click="sendlink()">
        <img src="../../static/images/sendlink.png" class="img">
        <div class="title">推送链接</div>
      </div>

      <!-- <div class="col" @click="recordscreen()">
        <img src="../../static/images/record.png" class="img">
        <div class="title">录屏</div>
      </div> -->

      <div class="col" @click="videoCall()">
        <img src="../../static/images/videoCall.png" class="img">
        <div class="title">语音转视频</div>
      </div>


    </Row>

  </div>

</div>
</template>

<script>
  import imchat from '../tool/imchat'
  export default {
        name: "AgentOp",
        data(){
          return{
              sessionId:null,
          }
        },
        props:['screenstreampublication','screenappstreampublication','screenstream','isConsulting'],
        methods:{

        videoCall(){
         if (this.opjudgment() == 0){
            return;
          }
          this.$emit('videoCall');
        },

        photoGuideBox(){
          if (this.opjudgment() == 0){
            return;
          }
          this.$emit('photoGuideBox');
        },


          sendvideo(){
            if (this.opjudgment() == 0){
              return;
            }
            this.$emit('sendvideo');
          },

          consulting(){
            if (this.opjudgment() == 0){
                return;
            }
            this.$emit('consulting');
          },

          remove(){
            if (this.opjudgment() == 0){
                return;
            }
            this.$emit('remove');     
          },

          stopConsulting(){
          if (this.opjudgment() == 0){
                          return;
                      }
            this.$emit('stopConsulting');
          },

          sendlink(){
            if (this.opjudgment() == 0){
              return;
            }
            this.$emit('sendlink');
          },

          snapshot(){
            if (this.opjudgment() == 0){
              return;
            }
            this.$emit('snapshot');
          },
        handsign(){
          if (this.opjudgment() == 0){
            return;
          }
          imchat.$emit('handsign');
        },

        sendform(){
          if (this.opjudgment() == 0){
            return;
          }
          imchat.$emit('sendform');
        },

        recordscreen(){
          if (this.opjudgment() == 0){
            return;
          }
          // this.$Message.success('敬请期待...');
          // return;
          this.$emit('recordscreen');
        },

          /*发文件*/
          sendagentfile(event){
            if (this.opjudgment() == 0){
              return;
            }
            var formData = new FormData();
            formData.append('file', document.getElementById("agentfile").files[0]);
            imchat.$emit('sendcontract',formData);
            // document.getElementById('agentfile').value = null;//可以选择相同的文件
            event.target.value = null;
          },

          stopscreen(publication){
            this.$emit('stopscreen',publication);
          },

          screenmark(){
            this.$emit('screenmark');
          },


          /*结束会话*/
          endsession(){
            if (this.opjudgment() == 0){
              return;
            }
            this.$emit('endsession');
          },

        screen(){
          if (this.opjudgment() == 0){
            return;
          }
          this.$emit('screen');
        },

        screenApp(){
          if (this.opjudgment() == 0){
            return;
          }
          this.$emit('screenApp');
        },

        transfer(){
          if (this.opjudgment() == 0){
            return;
          }
          this.$emit('transfer');
        },

        three(){
            if (this.opjudgment() == 0){
              return;
            }
            this.$emit('three');
        } ,



        opjudgment(){
            if (this.sessionId == null){
              this.$Message.error('暂无会话！');
              return 0;
            }
            if (this.screenstream || this.screenstreampublication){
              // this.$Message.error('坐席正在分享屏幕，暂不支持该操作');
              this.$Notice.error({
                title: '温馨提示',
                desc: '正在分享屏幕,不支持其他操作！',
                duration:10
              });
              return 0;
            }
            return 1;
        },
      }
    }
</script>

<style scoped>

  .content{
    width:90%;
    min-height: 140px;
    background:rgba(255,255,255,1);
    box-shadow:5px 7px 49px 5px rgba(44,137,234,0.13);
    border-radius:10px;
    margin-left: 5%;
    margin-top: 20px;
  }

  .col{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    margin-top: 30px;
    margin-left: 10px;
    margin-right: 10px;
  }

  .img{
    width: 60px;
    height: 60px;
  }

  .title{
    width:60px;
    height:20px;
    font-size:10px;
    font-family:PingFang SC;
    font-weight:300;
    color:rgba(51,51,51,1);
    line-height:20px;
    margin-top: 0px;
  }

</style>
